<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>


  </head>
  <body>
    <div id="example"></div>
	<script type="text/babel">
		/*
			一定要注意区分：【js语句(代码)】与【js表达式】
			1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，例子如下
				(1). a
				(2). a+b
				(3). demo(1)
				(4). arr.map()
				(5). function test(){}
			2.语句(代码)：例子如下(控制代码走向的东西)
				(1).if(){}
				(2).for(){}
				(3).switch(){case:xxxx}

				
		*/
		//模拟一些数据
		const data = ['Angular','React',"Vue"]
		const data2 = [<li>Angular</li>,<li>Angular</li>,<li>Angular</li>]
		const object = {name:'Angular',name2:'React',name3:'Vue'}
		//1.创建虚拟DOM
		const VDOM =(
			<div>
				<h1>前端js框架列表</h1>
				
				<ul>
				{
					data.map((item,index)=>{
						return <li key={index}>{item}</li>
					})	
				}
				</ul>
				
			</div>
		)

		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('example'))
	</script>
  </body>
</html>
